<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购货车</title>
    <link rel="stylesheet" href="/css/userweb/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/userweb/common.css">
    <link rel="stylesheet" href="/css/userweb/shoppingCar.css">
    <style type="text/css">
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        [v-cloak] {
            display: none;
        }
        .header{
            width: 100%;
            position: relative;
            background-color: #F2F2F2;
            overflow: hidden;
        }
        .user_name{
            float: left;
            margin-top: 20px;
        }
        .user_name span{
            font-size: 14px;
        }
        .header_nav_container{
            width: 100%;
            height: 60px;
        }
        .header_nav_box{
            width: 1200px;
            height: 60px;
            margin: 0 auto;
            position: relative;
        }
        .header_nav{
            margin-top: 13px;
            float: right;
        }
        .my_address{
            width: 95px;
            float: left;
            overflow: hidden;
        }
        .my_address_icon{
            float: left;
            line-height: 60px;
            margin-right: 10px;
            width: 12px;
        }
        .my_address_icon img{
            width: 100%;
            height: 100%;
        }
        .my_address p{
            font-size: 14px;
            color: #FF7013;
            float: left;
            line-height: 60px;
        }
        .header_nav ul li{
            padding: 0 20px;
            text-align: center;
            float: left;
        }
        .header_nav ul li:last-child{
            padding:0 0 0 20px;
        }
        .header_nav ul li.active a{
            color: #FF6A0E;
        }
        .header_nav ul li a:hover{
            color: #FF6A0E;
        }
        .header_nav ul li a{
            font-size: 12px;
            color: #333;
            text-decoration: none;
        }
        .header_nav ul li a .title_zh{
            line-height: 17px;
            font-size: 12px;
        }
        .header_nav ul li a .title_en{
            line-height: 15px;
            font-size: 12px;
        }
        .shop_search{
            font-size: 16px;
            position: relative;
        }
        .shop_search input{
            color: #C4C4C4;
            font-size: 14px;
            float: left;
            padding: 5px 15px;
            width: 160px;
            height: 34px;
            border: 1px solid #EE7833;
            border-radius: 50px 0 0 50px;
            background-color: #F2F2F2;
        }
        .shop_search input::-webkit-input-placeholder{
            color: #C4C4C4;
        }
        .shop_search input:focus{
            outline: none;
        }
        .shop_search_btn{
            float: left;
            width: 100px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            background-color: #EE7833;
            border-radius: 0 50px 50px 0;
        }
        .header_nav ul li .shop_search_btn a{
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }
        /*content*/
        .content{
            width: 100%;
            background-color: #fff;
            overflow: hidden;
        }
        .content_header{
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        .logo{
            float: left;
            overflow: hidden;
            margin-right: 20px;
        }
        .logo span{
            font-size: 18px;
            line-height: 60px;
            color: #EC5D2A;
            font-weight: bold;
            cursor: pointer;
        }
        .cut_line{
            float: left;
            margin-top: 20px;
            width: 1px;
            height: 20px;
            background-color: #DEDEDE;
        }
        .page_title{
            float: left;
            margin-top: 10px;
            margin-left: 20px;
            color: #3C3C3C;
            font-weight: bold;
        }
        .my_order_container{
            width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>
<body id="overhidden">
<div id="carVue" v-cloak>
    <div class="header">
        <!--导航-->
        <div class="header_nav_container">
        <div class="header_nav_box">
            <div class="user_name">
                <span>{{user_name}}</span>
            </div>
            <div class="header_nav">
                <ul>
                    <li>
                        <a :href="'/userweb/index/index.html'">
                            <div class="title_zh">首页</div>
                            <div class="title_en">Home</div>
                        </a>
                    </li>
                    <li class="active">
                        <a :href="'/userweb/index/shoppingCar.html'">
                            <div class="title_zh">购货车</div>
                            <div class="title_en">Shopping Car</div>
                        </a>
                    </li>
                    <li>
                        <a :href="'/userweb/index/collectionFolder.html'">
                            <div class="title_zh">收藏夹</div>
                            <div class="title_en">Collection folder</div>
                        </a>
                    </li>
                    <li>
                        <a :href="'/userweb/index/customerService.html'">
                            <div class="title_zh">联系客服</div>
                            <div class="title_en">Mine</div>
                        </a>
                    </li>
                    <li class="shop_search">
                        <input type="text" v-model="searchs" placeholder="搜索/Search">
                        <div class="shop_search_btn">
                            <a :href="'/userweb/index/index.html?search='+searchs">搜索/search</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <!--收藏-->
    <div class="model_box collection_confirm_box">
        <div class="model_content">
            <div class="close_model_box" onclick="closeCollection()">
                <img src="/image/userweb/slicesImg/close-btn.png" alt="">
            </div>
            <div class="model_info">
                <div class="model_info_title">
                    <div class="model_tip_title">
                        <div class="title_zh">{{collect_message}}</div>
                        <div class="title_en">{{collect_message_english}}</div>
                    </div>
                </div>
                <div class="model_info_cont">
                    <div class="model_img">
                        <img :src="product_image" alt="">
                    </div>
                    <div class="model_name">
                        <div class="title_zh">{{product_name}}</div>
                        <!--<div class="title_en">{{product_name_english}}</div>-->
                    </div>
                </div>
            </div>
            <div class="model_bottom_bar" onclick="closeCollection()">
                <div class="model_btn collection_sure_btn">确定(Determine)</div>
            </div>
        </div>
    </div>
    <!--删除-->
    <div class="model_box delete_confirm_box">
        <div class="model_content">
            <div class="close_model_box" onclick="closeDelete()">
                <img src="/image/userweb/slicesImg/close-btn.png" alt="">
            </div>
            <div class="model_info">
                <div class="model_info_title">
                    <div class="model_tip_title">
                        <div class="title_zh">确认删除该商品吗？</div>
                        <div class="title_en">confirm to delete this product?</div>
                    </div>
                </div>
                <div class="delete_model_info_cont">
                    <div class="model_img">
                        <img :src="product_image" alt="">
                    </div>
                    <div class="model_name">
                        <div class="title_zh">{{product_name}}</div>
                        <!--<div class="title_en">{{product_name_english}}</div>-->
                    </div>
                </div>
            </div>
            <div class="model_bottom_bar" v-on:click="del()" onclick="closeDelete()">
                <div class="model_btn delete_sure_btn">确定(determine)</div>
            </div>
        </div>
    </div>
    <div class="index_container">
        <div class="content">
            <div class="content_header">
                <div class="logo">
                    <span>小货郎</span>
                </div>
                <div class="cut_line"></div>
                <div class="page_title">
                    <div class="title_zh">购货车</div>
                    <div class="title_en">shopping cart</div>
                </div>
            </div>
            <!--订单列表-->
            <div class="my_order_container">
                <div class="order_list_box">
                    <div class="order_list_bar">
                        <div class="list_bar_box">
                            <div class="order_title">
                                <div class="title_zh">全部商品</div>
                                <div class="title_en">all products</div>
                            </div>
                            <div class="order_info_box">
                                <div class="order_price_title">
                                    <div class="title_zh">已选商品</div>
                                    <div class="title_en">chosen products</div>
                                </div>
                                <div class="order_price">
                                    <em>￡:</em>
                                    <span>0.00</span>
                                </div>
                                <div class="submit_order" v-on:click="settlement()">
                                    <a href="javascript:;">
                                        <div class="title_zh">提交订单</div>
                                        <div class="title_en">place order</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order_list_content">
                    <div class="cartMain_hd">
                        <ul class="order_col cartTop">
                            <li class="list_chk">
                                <input type="checkbox" id="all" class="whole_check">
                                <label>
                                    <span></span>
                                </label>
                                <div class="all_title">
                                    <div class="title_zh">全选</div>
                                    <div class="title_en">select all</div>
                                </div>
                            </li>
                            <li class="list_con">
                                <div class="title_zh">商品信息</div>
                                <div class="title_en">product information</div>
                            </li>
                            <li class="list_info">
                                <div class="title_zh">商品规格</div>
                                <div class="title_en">specifications</div>
                            </li>
                            <li class="list_price">
                                <div class="title_zh">单价</div>
                                <div class="title_en">price</div>
                            </li>
                            <li class="list_amount">
                                <div class="title_zh">数量</div>
                                <div class="title_en">quantity</div>
                            </li>
                            <li class="list_sum">
                                <div class="title_zh">金额</div>
                                <div class="title_en">amount</div>
                            </li>
                            <li class="list_op">
                                <div class="title_zh">操作</div>
                                <div class="title_en">operate</div>
                            </li>
                        </ul>
                    </div>
                    <div class="cartMain_hd_line">
                        <div class="line_style list_con_width"></div>
                        <div class="line_style list_info_width"></div>
                        <div class="line_style list_price_width"></div>
                        <div class="line_style list_amount_width"></div>
                        <div class="line_style list_sum_width"></div>
                        <div class="line_style list_op_width"></div>
                    </div>
                    <div id="buyCar_list" v-loading="loading">
                        <div class="cartBox" v-for="list in buy_car">
                            <div class="shop_info">
                                <div class="all_check">
                                    <!--店铺全选-->
                                    <input type="checkbox" class="shopChoice">
                                    <label>
                                        <span></span>
                                    </label>
                                </div>
                                <div class="shop_name">
                                    <a :href="'/userweb/index/shopList.html?supplierId='+list.supplier_id">
                                        <span>{{list.supplier_name}}</span>
                                    </a>
                                </div>
                            </div>
                            <div class="order_content" v-for="product in list.product">
                                <ul class="order_col cartCont">
                                    <li class="list_chk">
                                        <input type="checkbox" class="son_check" :value="product.cart_id" name="ids">
                                        <label>
                                            <span></span>
                                        </label>
                                    </li>
                                    <li class="list_con">
                                        <div class="list_img">
                                            <div class="yxj_sty" v-if="product.is_shelves != 1">已下架</div>
                                            <a :href="'/userweb/index/productInfo.html?productId='+product.product_id">
                                                <img :src="oss_url + product.product_image" alt="">
                                            </a>
                                        </div>
                                        <div class="list_text">
                                            <a v-if="product.is_shelves != 1">
                                                <div class="title_zh">{{product.product_name}}</div>
                                                <!--<div class="title_en">{{product.product_name_english}}</div>-->
                                            </a>
                                            <a :href="'/userweb/index/productInfo.html?productId='+product.product_id" v-else>
                                                <div class="title_zh">{{product.product_name}}</div>
                                                <!--<div class="title_en">{{product.product_name_english}}</div>-->
                                            </a>
                                        </div>
                                    </li>
                                    <li class="list_info">
                                        <div class="order_quantity">
                                            <span>{{product.specification}}{{product.unit}}</span>
                                        </div>
                                    </li>
                                    <li class="list_price">
                                        <div class="unit_price">
                                            <p class="price">￡{{product.price}}</p>
                                        </div>
                                    </li>
                                    <li class="list_amount">
                                        <div class="amount_box">
                                            <div class="num_reduce" v-on:click="productNum(1,product,list)">
                                                <img src="/image/userweb/slicesImg/num-reduce.png" alt="" >
                                            </div>
                                            <input type="text" class="sum" v-model="product.num" v-on:input="productNum(3,product,list)">
                                            <div class="num_add" v-on:click="productNum(2,product,list)">
                                                <img src="/image/userweb/slicesImg/num-add.png" alt="">
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list_sum">
                                        <div class="sum_body">
                                            <div class="body_title">
                                                <div class="title_zh">总增值税</div>
                                                <div class="title_en">total VAT</div>
                                            </div>
                                            <div class="body_cont">
                                                <div class="body_cont">￡{{product.total_tax}}</div>
                                            </div>
                                        </div>
                                        <div class="sum_body">
                                            <div class="body_title">
                                                <div class="title_zh">收取总额</div>
                                                <div class="title_en">total charge</div>
                                            </div>
                                            <div class="body_cont sum_price">
                                                <div class="sum_price_number">￡<span>{{product.total_price}}</span></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="list_op">
                                        <div class="move_favorite_bar" v-on:click="collection(product)">
                                            <a href="javascript:;" onclick="openCollection()">
                                                <div class="title_zh">移入收藏夹</div>
                                                <div class="title_en">move to favorite list</div>
                                            </a>
                                        </div>
                                        <div class="delete_bar" v-on:click="jump(product)">
                                            <a href="javascript:;" onclick="openDelete()">
                                                <div class="title_zh">删除</div>
                                                <div class="title_en">delete</div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="slogan">
        <div class="slogan_title">
            <p>让我们的生活有更好的选择</p>
        </div>
        <div class="sub_slogan_title">
            <p>Let our lives have a better choice.</p>
        </div>
    </div>
</div>
{include file="html/Common/indexFooter"}
</body>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/userweb/jquery.min.js"></script>
<script src="/js/userweb/jquery.imagezoom.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/userweb/common.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/userweb/indexHome/myShoppingCar.js"></script>
<script>
    $(function () {
        bannerInit();
        $("#shoppingCar").addClass("active");
        $("#shoppingCar").siblings().removeClass("active");
        /*//删除商品
        var $order_col = '';
        var $order_content = '';
        $('.delete_bar').click(function () {
            $order_col = $(this).parents('.order_col');
            $order_content = $order_col.parents('.order_content');
            $('.delete_confirm_box').fadeIn(300);
            $("#overhidden").css("overflow","hidden");
        });*/
        /* //确定按钮，移除商品
         $('.delete_sure_btn').click(function () {
             $order_col.remove();
             if($order_content.html().trim() == '' || $order_content.html().trim().length == 0){
                 $order_content.parents('.cartBox').remove();
             }
             closeDelete();
             $sonCheckBox = $('.son_check');
             totalMoney();
         });*/
    });
    function openDelete() {
        $('.delete_confirm_box').fadeIn(300);
        $("#overhidden").css("overflow","hidden");
    }
    function closeDelete() {
        $('.delete_confirm_box').fadeOut(300);
        $("#overhidden").css("overflow","inherit");
    }
    //移入收藏夹
    function openCollection() {
        $('.collection_confirm_box').fadeIn(300);
        $("#overhidden").css("overflow","hidden");
    }
    function closeCollection() {
        $('.collection_confirm_box').fadeOut(300);
        $("#overhidden").css("overflow","inherit");
    }
</script>
</html>